<template>
    <div class="page">
        <div class="box flexbet">
            <div>
                <el-select v-model="subsidencePeriod" placeholder="请选择">
                    <el-option
                        v-for="item in periodOpt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-select v-model="subsidencePeriod" placeholder="请选择">
                    <el-option
                        v-for="item in periodOpt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-select v-model="subsidencePeriod" placeholder="请选择">
                    <el-option
                        v-for="item in periodOpt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-select v-model="subsidencePeriod" placeholder="请选择">
                    <el-option
                        v-for="item in periodOpt"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-refresh-right"
                    >查询</el-button
                >
            </div>
            <div>
                <el-button type="primary" icon="el-icon-refresh-right"
                    >导出数据</el-button
                >
                <el-button type="primary" icon="el-icon-refresh-right"
                    >刷新</el-button
                >
            </div>
        </div>
        <div class="monitorList">
            <el-card
                class="boxcard"
                v-for="(item, index) in totalList"
                :key="index"
            >
                <div class="flexbet mid">
                    <div class="flexcol">
                        <span class="tit">{{ item.name }}</span>
                        <span class="bigfont">{{ item.realTimeData }}</span>
                        <span>
                            <span>较昨日</span>
                            <span :class="item.changeStatus ? 'red' : 'green'">
                                <i
                                    :class="
                                        item.changeStatus
                                            ? 'el-icon-top'
                                            : 'el-icon-bottom'
                                    "
                                ></i>
                                <span
                                    >{{ item.changeData }}{{ item.unit }}</span
                                >
                            </span>
                        </span>
                    </div>
                    <div class="iconbox" :class="'iconbg' + index">
                        <img :src="item.iconUrl" class="totalicon" />
                    </div>
                </div>
                <div class="flexbet bot">
                    <span v-for="(item2, index2) in item.numList" :key="index2">
                        {{ item2.label }}:{{ item2.num }}
                    </span>
                </div>
            </el-card>
        </div>
        <el-row class="mb30" :gutter="20">
            <el-col :span="18">
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold black">项目进度统计</span>
                        <div>
                            <el-tag>按阶段</el-tag>
                            <el-tag type="danger">按部门</el-tag>
                        </div>
                    </div>
                    <div
                        id="subsidenceTrend"
                        style="width: 100%; height: 380px"
                    ></div>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold">安全风险监测</span>
                        <span class="blue">查看全部</span>
                    </div>
                    <div class="flexrow">
                        <div
                            id="pointTrend"
                            style="width: 40%; height: 380px; margin: 0 auto"
                        ></div>
                        <ul class="msgbox">
                            <li
                                v-for="(item, index) in msgList"
                                :key="index"
                                :class="'msg' + item.status"
                            >
                                <div class="flexbet">
                                    <span class="black bold">{{
                                        item.title
                                    }}</span>
                                    <el-tag>高风险</el-tag>
                                </div>
                                <span class="desc">{{ item.desc }}</span>
                                <div class="flexbet">
                                    <span class="">{{ item.time }}</span>
                                    <el-tag>高风险</el-tag>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold">人员出勤情况</span>
                        <div>
                            显示：
                            <el-select
                                v-model="pointName"
                                placeholder="请选择"
                                class="select"
                            >
                                <el-option
                                    v-for="item in pointNameOpt"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <el-table
                        :data="realtableData"
                        stripe
                        style="width: 100%; height: 330px; padding: 20px"
                        class="card"
                    >
                        <el-table-column prop="id" label="项目名称" width="100">
                        </el-table-column>
                        <el-table-column prop="lever" label="预警等级">
                            <template slot-scope="scope">
                                <el-tag
                                    v-if="scope.row.lever == 0"
                                    type="success"
                                    effect="dark"
                                    style="width: 70px; text-align: center"
                                    >正常</el-tag
                                >
                                <el-tag
                                    v-if="scope.row.lever == 1"
                                    color="#7E87F5"
                                    effect="dark"
                                    >一级预警</el-tag
                                >
                                <el-tag
                                    v-if="scope.row.lever == 2"
                                    type="danger"
                                    effect="dark"
                                    >二级预警</el-tag
                                >
                                <el-tag
                                    v-if="scope.row.lever == 3"
                                    type="warning"
                                    effect="dark"
                                    >三级预警</el-tag
                                >
                            </template>
                        </el-table-column>
                        <el-table-column prop="location" label="应到人数">
                        </el-table-column>
                        <el-table-column prop="name" label="实到人数">
                        </el-table-column>
                        <el-table-column label="出勤率">
                            <template slot-scope="scope">
                                {{ scope.row.realData + scope.row.unit }}
                            </template>
                        </el-table-column>
                        <el-table-column label="未到原因">
                            <template slot-scope="scope">
                                {{
                                    "±" + scope.row.warningData + scope.row.unit
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="预警状态">
                            <template slot-scope="scope">
                                <el-tag
                                    class="tabletag"
                                    effect="dark"
                                    v-if="scope.row.status == 0"
                                    style=""
                                    >正常</el-tag
                                >
                                <el-tag
                                    class="tabletag"
                                    effect="dark"
                                    v-else
                                    :type="
                                        scope.row.status == 1
                                            ? 'warning'
                                            : 'danger'
                                    "
                                    >{{
                                        scope.row.status == 1 ? "预警" : "异常"
                                    }}</el-tag
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span class="blue">详情</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold">项目状态分布</span>
                        <span class="blue">查看全部</span>
                    </div>
                    <div
                        id="leverTrend"
                        style="width: 100%; height: 380px"
                    ></div>
                    <div class="flexrow">
                        <div>
                            <div>
                                <span>计划完成率</span>
                                <span>92.3%</span>
                            </div>
                            <el-progress :percentage="50"></el-progress>
                        </div>
                        <div>
                            <div>
                                <span>质量合格率</span>
                                <span>98.7%</span>
                            </div>
                            <el-progress :percentage="50"></el-progress>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold">设备运行分布</span>
                        <span class="blue">查看全部</span>
                    </div>
                    <div class="card pad20" style="width: 100%; height: 380px">
                        <ul class="">
                            <li v-for="(item, index) in eqList" :key="index">
                                <div class="flexbet">
                                    <span>{{ item.title }}</span>
                                    <span>{{ item.statusName }}</span>
                                </div>
                                <el-progress :percentage="50"></el-progress>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold">近期预警信息</span>
                        <el-tag>5条未处理</el-tag>
                    </div>
                    <ul class="msgbox">
                        <li
                            v-for="(item, index) in msgList"
                            :key="index"
                            :class="'msg' + item.status"
                        >
                            <div class="flexbet">
                                <span class="black bold">{{ item.title }}</span>
                                <span>{{ item.time }}</span>
                            </div>
                            <span class="desc">{{ item.desc }}</span>
                            <div class="flexrow">
                                <el-tag>高风险</el-tag>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="card">
                    <div class="title flexbet">
                        <span class="bold">天气信息</span>
                        <span>{{ weather.location }} · {{ weather.data }}</span>
                    </div>
                    <div class="flexbet">
                        <div>
                            <span class="bigfont"
                                >{{ weather.temperature }}°C</span
                            >
                            <span>{{ weather.temdesc }}</span>
                        </div>
                        <img :src="weather.imgUrl" />
                    </div>
                    <ul>
                        <li
                            v-for="(item, index) in weather.feature"
                            :key="index"
                        >
                            <span>{{ item.time }}</span>
                            <span>{{ item.temperature }}°C</span>
                            <img :src="item.imgUrl" />
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            monitorList: [],
            totalList: [],
            btns: ["日", "周", "月", "年"],
            active0: 0,
            periodOpt: [
                {
                    value: 1,
                    label: "最近24小时",
                },
                {
                    value: 2,
                    label: "最近1周",
                },
                {
                    value: 3,
                    label: "最近1个月",
                },
                {
                    value: 4,
                    label: "最近3个月",
                },
                {
                    value: 5,
                    label: "最近半年",
                },
            ],
            subsidencePeriod: 1,
            groundwaterPeriod: 1,
            pointNameOpt: [
                { value: 1, label: "全部监测项目" },
                {
                    value: 2,
                    label: "位移监测",
                },
            ],
            pointName: 1,
            pointLocationOpt: [
                { value: 1, label: "全部监测位置" },
                {
                    value: 2,
                    label: "男厕基坑边",
                },
            ],
            pointLocation: 1,
            msgNum: 5,
            msgList: [],
            eqList: [],
            realtableData: [],
            weather: {
                location: "北京",
                date: "2025-07-15",
                temperature: 28,
                temdesc: "多云转晴",
                imgUrl: "",
                feature: [
                    {
                        time: "今天",
                        temperature: 28,
                        imgUrl: "",
                    },
                    {
                        time: "明天",
                        temperature: 26,
                        imgUrl: "",
                    },
                    {
                        time: "后天",
                        temperature: 24,
                        imgUrl: "",
                    },
                    {
                        time: "周四",
                        temperature: 25,
                        imgUrl: "",
                    },
                ],
            },
        };
    },
    computed: {},
    watch: {},
    mounted() {
        this.monitorList = [
            {
                name: "水平位移监测",
                status: 0, //0正常 1预警
                realTimeData: 2.3,
                unit: "mm",
                warningData: 5,
                updateTime: 2,
                changeStatus: 0, //0降低 1增长
                changeData: 0.2,
            },
            {
                name: "沉降监测",
                status: 1, //0正常 1预警
                realTimeData: 4.8,
                unit: "mm",
                warningData: 5,
                updateTime: 6,
                changeStatus: 1, //0降低 1增长
                changeData: 0.7,
            },
            {
                name: "地下水位监测",
                status: 0, //0正常 1预警
                realTimeData: 6.2,
                unit: "mm",
                warningData: 8,
                updateTime: 2,
                changeStatus: 0, //0降低 1增长
                changeData: 0.3,
            },
            {
                name: "支撑轴立面监测",
                status: 0, //0正常 1预警
                realTimeData: 2.3,
                unit: "KN",
                warningData: 2500,
                updateTime: 10,
                changeStatus: null, //0降低 1增长
                changeData: 0,
            },
        ];
        this.totalList = [
            {
                name: "项目总数",
                realTimeData: 32,
                changeStatus: 1, //0降低 1增长
                changeData: 8.2,
                iconUrl: "../../static/pit/location.png",
                numList: [
                    {
                        label: "进行中",
                        num: 24,
                    },
                    {
                        label: "已完成",
                        num: 8,
                    },
                    {
                        label: "延期",
                        num: 2,
                    },
                ],
            },
            {
                name: "人员总数",
                realTimeData: 1254,
                changeStatus: 1, //0降低 1增长
                changeData: 12.5,
                iconUrl: "../../static/pit/warn.png",
                numList: [
                    {
                        label: "在岗",
                        num: 1024,
                    },
                    {
                        label: "请假",
                        num: 187,
                    },
                    {
                        label: "离职",
                        num: 44,
                    },
                ],
            },
            {
                name: "安全事件",
                realTimeData: 12,
                changeStatus: 0, //0降低 1增长
                changeData: 4.3,
                iconUrl: "../../static/pit/wifi.png",
                numList: [
                    {
                        label: "高风险",
                        num: 2,
                    },
                    {
                        label: "中风险",
                        num: 5,
                    },
                    {
                        label: "低风险",
                        num: 5,
                    },
                ],
            },
            {
                name: "设备总数",
                realTimeData: 867,
                changeStatus: 1, //0降低 1增长
                changeData: 5.7,
                iconUrl: "../../static/pit/data.png",
                numList: [
                    {
                        label: "正常",
                        num: 823,
                    },
                    {
                        label: "维修中",
                        num: 34,
                    },
                    {
                        label: "报废",
                        num: 10,
                    },
                ],
            },
        ];

        (this.realtableData = [
            {
                id: "JC-001",
                lever: 1,
                location: "东北角连续墙",
                name: "位移监测",
                realData: 3.2,
                unit: "mm",
                warningData: 10,
                time: "2025-05-13 10:00",
                status: 0, //0正常 1预警 2异常
            },
            {
                id: "JC-002",
                lever: 3,
                location: "南边基坑边",
                name: "底下水位监测",
                realData: 5.7,
                unit: "m",
                warningData: 8,
                time: "2025-05-13 09:30",
                status: 2,
            },
            {
                id: "JC-003",
                lever: 3,
                location: "东侧地表",
                name: "沉降监测",
                realData: 2.1,
                unit: "mm",
                warningData: 12,
                time: "2025-05-13 09:00",
                status: 1,
            },
            {
                id: "JC-004",
                lever: 0,
                location: "第3道钢结构",
                name: "支撑轴力监测",
                realData: 1250,
                unit: "KN",
                warningData: 1800,
                time: "2025-05-13 08:00",
                status: 2,
            },
        ]),
            (this.msgList = [
                {
                    status: 2, ////0正常 1预警 2异常
                    title: "东区地下水位超限",
                    desc: "JC-004 监测点地下水位达到 6.8m，超过警戒值 5m",
                    time: "2025-05-12 12:30",
                },
                {
                    status: 1,
                    title: "北区水平位移接近警戒值",
                    desc: "JC-002 监测点水平位移达到 5.7mm，接近警戒值 8mm",
                    time: "2025-05-12 11:45",
                },
                {
                    status: 1,
                    title: "南区支撑轴力波动异常",
                    desc: "JC-008 监测点支撑轴力波动幅度超过 15%，需关注",
                    time: "2025-05-12 10:20",
                },
                {
                    status: 0,
                    title: "西区沉降已恢复正常",
                    desc: "JC-015 监测点沉降值已恢复到正常范围，警报解除",
                    time: "2025-05-12 09:15",
                },
            ]);
        this.eqList = [
            {
                status: 0,
                statusName: "在线",
                title: "测斜仪-JC-001",
                location: "西侧连续墙",
                desc: "正常运行",
            },
            {
                status: 2,
                statusName: "离线",
                title: "地下水位仪-JC-002",
                location: "南侧基坑边",
                desc: "需要维护",
            },
            {
                status: 1,
                statusName: "信号弱",
                title: "支撑轴力计-JC-003",
                location: "第3道钢支撑",
                desc: "数据有波动",
            },
        ];
        this.subsidenceTrendFn();
        this.pointTrendFn();
        this.leverTrendFn();
    },
    methods: {
        subsidenceTrendFn() {
            let subsidenceTrend = this.$echarts.init(
                document.getElementById("subsidenceTrend")
            );
            subsidenceTrend.setOption({
                color: ["#4578F1", "#58D9B4"],
                grid: {
                    left: "4%",
                    right: "4%",
                    bottom: "20%",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    bottom: "5%",
                    left: "center",
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: ["今日沉降(mm)", "累计沉降(mm)"],
                },
                xAxis: [
                    {
                        type: "category",
                        axisLabel: {
                            margin: 10, // 调整标签与刻度线之间的距离
                        },
                        axisTick: {
                            alignWithLabel: true, // 确保标签与刻度线对齐
                        },
                        data: [
                            "S01",
                            "S02",
                            "S03",
                            "S04",
                            "S05",
                            "S06",
                            "S07",
                            "S08",
                        ],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                    },
                ],
                series: [
                    {
                        name: "今日沉降(mm)",
                        type: "bar",
                        emphasis: {
                            focus: "series",
                        },

                        data: [0.3, 0.5, 0.7, 0.9, 0.6, 0.4, 0.2, 0.5],
                    },
                    {
                        name: "累计沉降(mm)",
                        type: "bar",
                        emphasis: {
                            focus: "series",
                        },
                        data: [2.1, 3.5, 4.2, 5.6, 4.8, 3.2, 1.8, 3.5],
                    },
                ],
            });
        },

        leverTrendFn() {
            let leverTrend = this.$echarts.init(
                document.getElementById("leverTrend")
            );
            leverTrend.setOption({
                color: ["#828AF5", "#FDE08C", "#FB8981", "#5ADAB4"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: "5%",
                    left: "center",
                    itemWidth: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: [
                        { icon: "circle", name: "一级预警" },
                        { icon: "circle", name: "二级预警" },
                        { icon: "circle", name: "三级预警" },
                        { icon: "circle", name: "正常" },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["50%"],
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },

                        data: [
                            { value: 4.59, name: "一级预警" },
                            { value: 21.1, name: "二级预警" },
                            { value: 11.01, name: "三级预警" },
                            { value: 63.3, name: "正常" },
                        ],
                    },
                ],
            });
        },
        pointTrendFn() {
            let pointTrend = this.$echarts.init(
                document.getElementById("pointTrend")
            );
            pointTrend.setOption({
                color: ["#3AA0FF", "#36CBCB", "#4ECB73", "#FAD337", "#F2637B"],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    bottom: "8%",
                    left: "center",
                    itemWidth: 10,
                    textStyle: {
                        color: "#8C8C8C",
                    },
                    data: [
                        { name: "位移监测(个)", icon: "circle" },
                        { name: "沉降监测(个)", icon: "circle" },
                        { name: "底下水位监测(个)", icon: "circle" },
                        { name: "支撑轴力监测(个)", icon: "circle" },
                        { name: "深层水平位移监测(个)", icon: "circle" },
                    ],
                },
                series: [
                    {
                        type: "pie",
                        radius: ["35%", "60%"],
                        avoidLabelOverlap: false,
                        center: ["50%", "40%"],
                        label: {
                            show: false,
                            position: "center",
                        },
                        emphasis: {
                            label: {
                                show: true,
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        data: [
                            { value: 25.0, name: "位移监测(个)" },
                            { value: 21.88, name: "沉降监测(个)" },
                            { value: 18.75, name: "底下水位监测(个)" },
                            { value: 15.63, name: "支撑轴力监测(个)" },
                            { value: 18.75, name: "深层水平位移监测(个)" },
                        ],
                    },
                ],
            });
        },
        /////////////////////////
    },
};
</script>

<style scoped lang="scss">
.page {
    width: 100%;
    background: #f5f5f5;
    padding: 20px 10px;
    padding: 30px 0 30px 30px;
    font-size: 16px;
    color: #7a7b7c;
    .card {
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
}

.flexrow {
    display: flex;
    flex-direction: row;
}
.flexcol {
    display: flex;
    flex-direction: column;
}

.flexbet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.flexwrap {
    display: felx;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}
.monitorList {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 20px 0;
    border-radius: 10px;
    .boxcard {
        width: 24%;
        color: #7a7b7c;
        padding: 20px;
        .tit {
            align-items: baseline;
            .tag {
                border-radius: 30px;
                width: 60px;
                text-align: center;
                font-size: 14px;
                color: #fff;
                padding: 3px 0;
            }
        }
        .mid {
            padding: 20px 0;
            border-bottom: 1px solid #f2f6fc;
            .iconbox {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                .totalicon {
                    width: 30px;
                    height: 30px;
                }
            }
            .iconbg0 {
                background: #e7eeff;
            }
            .iconbg1 {
                background: #fff2e5;
            }
            .iconbg2 {
                background: #e5f7e9;
            }
            .iconbg3 {
                background: #e7f9f9;
            }
        }
        .bot {
            font-size: 14px;
            margin-top: 20px;
        }
        .bigfont {
            font-size: 36px;
            color: #000;
            font-weight: 800;
            margin-right: 10px;
        }
    }
}

.item {
    height: 440px;
    .title {
        width: 100%;
        margin-bottom: 20px;
        height: 40px;
        align-items: center;
        .bold {
            color: #000;
            font-size: 20px;
        }
        .rightfont {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
    .imgbox {
        position: relative;
        width: 100%;
        height: 380px;
        .bg {
            width: 100%;
            height: 100%;
        }
        .topcover {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            .btngroup {
                display: flex;
                flex-direction: row;
                flex: 1;
                .iconbtn {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    background: rgba(256, 256, 256, 0.5);
                    margin-right: 10px;
                    border-radius: 5px;
                    height: 30px;
                    font-size: 14px;
                    padding: 0 10px;
                    color: #6c6b6b;
                    img {
                        width: 20px;
                        margin-right: 5px;
                    }
                }
            }
            .rbtn {
                background: #2762ef;
                color: #fff;
                border-radius: 5px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                padding: 0 10px;
            }
        }
        .botcover {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            flex-direction: column;
            background: rgba(256, 256, 256, 0.5);
            border-radius: 5px;
            font-size: 14px;
            padding: 12px;
            line-height: 20px;
            color: #333;
        }
    }
}
.msgbox {
    flex: 1;
    padding: 20px;
    li {
        width: 100%;
        padding: 20px 30px;
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        border-radius: 10px;
        .iconbox {
            width: 40px;
            height: 40px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }
        .lefticon {
            width: 25px;
            height: 25px;
        }
    }
    .msg0 {
        border: 1px solid #c4eecd;
        background: #f2fbf4;
    }
    .msg1 {
        border: 1px solid #ffe0c2;
        background: #fff8f2;
    }
    .msg2 {
        border: 1px solid #fccaca;
        background: #feecec;
    }
    .bg2 {
        background: #fddada;
    }
    .bg1 {
        background: #ffecd9;
    }
    .bg0 {
        background: #d9f3df;
    }
}
.eqbox {
    li {
        width: 100%;
        height: 80px;
        padding: 20px 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        border-radius: 10px;
        background: #f9f9f9;
        .iconbox {
            width: 40px;
            height: 40px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }
        .lefticon {
            width: 25px;
            height: 25px;
        }
        .desc {
            display: flex;
            flex-direction: column;
            flex: 1;
            margin-left: 10px;
            line-height: 20px;
            .location {
                display: inline-block;
                width: 110px;
            }
        }
    }
    .status0 {
        color: #2cb88e;
    }
    .status1 {
        color: #f0c308;
    }
    .status2 {
        color: red;
    }

    .bg2 {
        background: #fee2e2;
    }
    .bg1 {
        background: #fef9c3;
    }
    .bg0 {
        background: #dbeafe;
    }
    .gray {
        color: #999;
    }
}
.btntag {
    display: inline-block;
    padding: 3px 12px;
    background: #f2f3f5;
    color: #333;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}

.active0 {
    background: #e7eeff !important;
    color: #2762ef !important;
}

.bold {
    font-weight: 800;
}
.black {
    color: #000;
}
.red {
    color: #fa746b;
}
.green {
    color: #3dd4a7;
}
.blue {
    color: #2762ef;
}
.greenbg {
    background: #3dd4a7;
}
.yellowbg {
    background: #fddb78;
}
.redbg {
    background: #fa746b;
}
.circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin: 0 5px;
}
.mb30 {
    margin-bottom: 30px;
}
.blockbtn {
    width: 100%;
    padding: 10px;
    text-align: center;
    border: 1px solid #d3eaff;
    color: #2762ef;
    background: #fff;
    border-radius: 10px;
}
.pad20 {
    padding: 20px;
}
.select {
    margin-right: 10px;
    width: 150px;
}
.tabletag {
    border-radius: 30px;
    width: 55px;
    padding: 0;
    text-align: center;
    height: 28px;
    line-height: 25px;
}
/deep/.el-table thead th {
    background: #f2f2f2 !important;
    color: #333;
    font-weight: 400;
}
.box {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
}
</style>
